<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title">已删除项目列表</h2>
    </div>
    <clr-datagrid (clrDgRefresh)="refresh($event)">
      <clr-dg-column [clrDgField]="'id'" class="col-id">
        <ng-container *clrDgHideableColumn="{hidden: true}">
          ID
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'name'" class="col-app-name">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          名称
        </ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">
          元数据
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'description'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          描述
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'user'">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          创建者
        </ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          创建时间
        </ng-container>
      </clr-dg-column>
      <clr-dg-row *ngFor="let app of apps" [clrDgItem]="app">
        <clr-dg-action-overflow >
          <button class="action-item" (click)="recoverApp(app)" >恢复</button>
          <!-- 暂时不支持app的硬删除 -->
          <!-- <button class="action-item" (click)="deleteApp(app)">彻底删除</button> -->
        </clr-dg-action-overflow>
        <clr-dg-cell class="col-id">{{app.id}}</clr-dg-cell>
        <clr-dg-cell class="col-app-name copy">{{app.name}}</clr-dg-cell>
        <clr-dg-cell>
          <div class="text-overflow">
            <a href="javascript:;" (click)="detailMetaDataTpl(app.metaData)">{{app.metaData}}</a>
          </div>
        </clr-dg-cell>
        <clr-dg-cell>{{app.description}}</clr-dg-cell>
        <clr-dg-cell>{{app.user}}</clr-dg-cell>
        <clr-dg-cell class="col-time">{{app.createTime | date:'yyyy-MM-dd HH:mm'}}</clr-dg-cell>
      </clr-dg-row>

     <wayne-paginate
        [(currentPage)]="currentPage"
        [total]="pageState.page.totalCount"
        [pageSizes]="[10, 20, 50]"
        (sizeChange)="pageSizeChange($event)"
      >
      </wayne-paginate>
    </clr-datagrid>
  </div>
</div>


